<template>
  <a-radio-group v-if="tagType == 'radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
  </a-radio-group>
  <a-select
    v-else-if="tagType == 'select'"
    :getPopupContainer="(target) => target.parentNode"
    :placeholder="placeholder"
    :disabled="disabled"
    :value="getValueSting"
    @change="handleInput"
  >
    <div slot="dropdownRender" slot-scope="menu">
      <v-nodes :vnodes="menu" />
      <div v-if="isdropdownRender">
        <a-divider style="margin: 4px 0" />
        <div  style="padding: 4px 8px; cursor: pointer" @click="addItem">
          <a-icon type="plus" /> 新建
        </div>
      </div>
    </div>
    <a-select-option :value="undefined">请选择</a-select-option>
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block; width: 100%" :title="item.text || item.label">
        {{ item.text || item.label }}
      </span>
    </a-select-option>
  </a-select>
</template>

<script>
import { ajaxGetDictItems } from '@/api/api'
import { getAction } from '../../api/manage'

export default {
  name: 'JDictSelectTag',
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  props: {
    options: String,
    dictCode: String,
    dictUrl: String,
    placeholder: String,
    otherField: String,
    triggerChange: Boolean,
    disabled: Boolean,
    value: [String, Number],
    type: String,
    isdropdownRender: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      dictOptions: [],
      tagType: '',
    }
  },
  watch: {
    dictCode: {
      immediate: true,
      deep: true,
      handler() {
        this.initDictData()
      },
    },
    dictUrl: {
      immediate: true,
      deep: true,
      handler() {
        this.initDictUrlData()
      },
    },
    options: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) this.dictOptions = JSON.parse(val)
      },
    },
  },
  created() {
    // console.log(this.dictCode);
    if (!this.type || this.type === 'list') {
      this.tagType = 'select'
    } else {
      this.tagType = this.type
    }
  },
  computed: {
    getValueSting() {
      return this.value ? this.value.toString() : null
    },
  },
  methods: {
    initDictData() {
      if (this.dictCode) {
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems(this.dictCode, { otherField: this.otherField }).then((res) => {
          if (res.success) {
            this.dictOptions = res.result
          }
        })
      }
    },
    initDictUrlData() {
      if (this.dictUrl) {
        getAction('/online/api/select/' + this.dictUrl, { otherField: this.otherField }).then((res) => {
          if (res.success) {
            this.dictOptions = res.result
          }
        })
      }
    },
    handleInput(e) {
      let val
      if (this.tagType == 'radio') {
        val = e.target.value
      } else {
        val = e
      }
      let row = {}
      this.dictOptions.forEach((item) => {
        if (item.key == val) {
          row = item
        }
      })
      if (this.triggerChange) {
        this.$emit('change', val, row)
      } else {
        this.$emit('input', val, row)
      }
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = dictOptions
    },
    getCurrentDictOptions() {
      return this.dictOptions
    },
    addItem() {
      this.$emit('addDropItem',{})
    },
  },
}
</script>

<style scoped>
</style>